<template>
  <div class="appraise-manage">
    <search-form-table 
      :url="url" ref="searchtable" 
      :form="form"
      @changeStatus="changeStatus"
      :columns="columns"
    >

      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="输入搜索">
            <a-input
              v-decorator="[
                'productName',
              ]"
              placeholder="评价关键词/商品名称"
            >
            </a-input>
          </a-form-item>
      <!--    <a-form-item label="商品类型">
            <a-select
              style="width: 150px"

              allowClear
              :options="productTypeOptions"
              v-decorator="[
                'type',
              ]"
              placeholder="请选择商品类型"
            >
            </a-select>
          </a-form-item>-->
          <a-form-item label="用户昵称">
            <a-input
              v-decorator="[
                'nickName',
              ]"
              placeholder=""
            >
            </a-input>
          </a-form-item>
        </a-form>
      </template>
      <template slot="oprationRow">
        <permission authority="product:reviews:add">
          <a-button type="default" @click="openInfo({}, 'addVisible')">新增虚拟评价</a-button>
        </permission>
        <permission authority="">
          <a-button @click="showHideRows($refs.searchtable.selectedRowKeys, 'show')" type="default">显示评价</a-button>
        </permission>
        <permission authority="">
          <a-button @click="showHideRows($refs.searchtable.selectedRowKeys, 'hide')" type="default">隐藏评价</a-button>
        </permission>
        <permission authority="product:reviews:delete">
          <a-button @click="deleteRows($refs.searchtable.selectedRowKeys)" type="danger" icon="delete">删除</a-button>
        </permission>
      </template>

      <template slot="tableOperation" slot-scope="{record}">
        <permission authority="product:reviews:info">
          <span class="text-primary pointer" @click="openInfo(record, 'infoVisible')">查看</span>
        </permission>

        <permission authority="" v-if="record.source!==1">
          <a-divider type="vertical" />
          <span class="text-primary pointer" @click="openInfo(record,'editVisible')">修改</span>
      <!-- 可以根据record.display的值动态显示哪个按钮<span  @click="openInfo(record,'editVisible')">编辑2</span>-->
        </permission>

        <permission authority="product:reviews:delete">
          <a-divider type="vertical" />
          <span class="text-danger pointer" @click="deleteRows([record.id])">删除</span>
        </permission>
      </template>
    </search-form-table>

    <appraise-info  :record="currentRecord" @cancel="closeInfoModal" :visible="infoVisible" />
    <appraise-add   :record="currentRecord" @cancel="closeInfoModal" :visible="addVisible" />
    <appraise-edit  :record="currentRecord" @cancel="closeInfoModal" :visible="editVisible" />
  </div>
</template>
<script>
import AppraiseInfo from './components/AppraiseInfo'
import AppraiseAdd from './components/AppraiseAdd'
import AppraiseEdit from './components/AppraiseEdit'

import SearchFormTable from "./SearchTable/index";
export default {
  name: 'appraise-manage',
  components:{
    SearchFormTable,
    AppraiseInfo,
    AppraiseAdd,
    AppraiseEdit
  },
  data () {
    return {
      url: '/product/reviews/page',
      infoVisible: false,
      addVisible: false,
      editVisible: false,
      currentRecord: {},
      form: this.$form.createForm(this, { name: 'table_search' }),
      columns:[
        {
          title: '商品编号',
          dataIndex: 'productId',
          key: 'productId',
        },
        {
          title: '用户昵称',
          dataIndex: 'nickName',
          key: 'nickName',
        },
        {
          title: '商品名称',
          dataIndex: 'productName',
          key: 'productName',
          customRender: (text, row) => {
            // console.log('text', text)
            return <div class="product_td"><table-img src={row.goodsPicture}/><div class="product_name">{text}</div></div>
          }
        },
        {
          title: '评价',
          dataIndex: 'stars',
          key: 'stars',
          customRender: text => <a-rate value={text} disabled/>
        },
        {
          title: 'IP地址',
          dataIndex: 'ipUrl',
          key: 'ipUrl'
        },
        {
          title: '评价来源',
          dataIndex: 'source',
          key: 'source',
          customRender: text=> {
            // console.log(text)
            return text ===1?'小程序':'虚拟评价'
          }
        },
        {
          title: '评论时间',
          dataIndex: 'createDate',
          key: 'createDate',
        },
        {
          title: '是否显示',
          dataIndex: 'display',
          key: 'display',
          scopedSlots: { customRender: 'switch'}
          // customRender: (text, record) => < a-switch checked={text == 1} onChange = { () => this.displayChange(record, text)} />,
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation'}
        }
        ]
    }
  },
  mounted () {},
  methods:{

    changeStatus(record) {
      // 单个显示 或者隐藏评价
      console.log('改之后的record:',record)
      // 拿到了 record  及其id
      // let display = record.display===true?1:0
      let display = record.isShow === true?1:0
      this.$post('/product/reviews/display',{ids:[record.id],display})
        .then(res => {
        if (res && res.returnCode === 1000) {
          this.$message.success('操作成功!')
          this.$refs.searchtable.refreshTable()
        }
      })
    },

    closeInfoModal (freshTable) {
      this.infoVisible = false
      this.addVisible = false
      this.editVisible = false
      if (freshTable) {
        this.$refs.searchtable.refreshTable()
      }
    },

    openInfo (record, key) {
      this.currentRecord = record
      this[key] = true
    },

    // 批量显示 或者隐藏评价
    showHideRows (ids, status) {
      if (!(ids && ids.length)) {
        this.$message.warn('请先选择一项后再进行操作')
        return
      }
      if (status==='show'){
        this.$confirm({
          title: '显示提示',
          content: '请确认显示评价',
          okText: '确认',
          cancelText: '取消',
          onOk: ()=> {
            this.$post('/product/reviews/display',{ ids,display:1}).then(res => {
              if (res && res.returnCode == 1000) {
                this.$message.success('成功')
                this.$refs.searchtable.refreshTable()
                // 这个体验不是很好...
                this.$router.go(0)
              }
            })
          }
        })
      }
      else {
        this.$confirm({
          title: '隐藏提示',
          content: '请确认隐藏评价',
          okText: '确认',
          cancelText: '取消',
          onOk: ()=> {
            this.$post('/product/reviews/display', { ids,display:0}).then(res => {
              if (res && res.returnCode == 1000) {
                this.$message.success('成功')
                this.$refs.searchtable.refreshTable()
                this.$router.go(0)
              }

            })
          }
        })
      }

    },

    deleteRows (ids) {
      // selectRowKeys  与record.id不是一个东西  据id删除 而不是productID删除
      console.log(ids)
      if (!(ids && ids.length)) return this.$message.warn('请先选择一项后再进行操作')
      this.$confirm({
        title: '删除提示',
        content: '删除操作不可恢复，请确认是否删除？',
        okText: '确认删除',
        cancelText: '取消',
        onOk: ()=> {
          this.$post('/product/reviews/delete', {ids}).then(res => {
            if (res && res.returnCode == 1000) {
              this.$message.success('删除成功')
              this.$refs.searchtable.refreshTable()
            }
          })
        }
      })
    },



  }
}
</script>

<style lang="less" scoped>
  .product_td{
    display: flex;
    align-items: center;
    .product_name{
      margin-left:6px;
    }
  }
</style>